<!--
 * @Date: 2024-09-11 20:50:38
 * @Author: Yu Weifeng weifeng.yu@gientech.com
 * @Description: 热力图
-->
<template>
  <ChartBase :options="chartOptions" :currentEcharts="echarts" class="lc-chart__heatmap" />
</template>
<script setup>
import { chartProps } from '../base.ts';
import { computed } from 'vue';
import ChartBase from '../base.vue';
/******* echarts *********/
import * as echarts from 'echarts/core';
import {
  TitleComponent,
  TooltipComponent,
  DatasetComponent,
  GridComponent,
  VisualMapComponent
} from 'echarts/components';
import { HeatmapChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
/******* chart tools *********/
echarts.use([
  TitleComponent,
  TooltipComponent,
  DatasetComponent,
  GridComponent,
  VisualMapComponent,
  HeatmapChart,
  CanvasRenderer
]);

defineOptions({
  name: 'LcChartHeatMap'
});
const props = defineProps(chartProps);

const processData = (data, mapOptions) => {
  const transformData = data.map((item) => {
    return [
      item[mapOptions?.xAxis || 'xAxis'],
      item[mapOptions?.yAxis || 'yAxis'],
      item[mapOptions?.valueMap || 'value']
    ];
  });

  return transformData;
};
const chartOptions = computed(() => {
  const options = props.options;
  const processedData = processData(props.data, props.mapOptions);
  if (Array.isArray(options['series'])) {
    options['series'][0]['data'] = processedData;
  } else {
    options['series']['data'] = processedData;
  }
  return options;
});
</script>
